<template>
  <!-- 1.3.4 照明控制-->
  <div class="light mediumtablestyle">
    <div class="top betweenbox">
      <div class="top-name centerbox">{{changeStationName}}</div>
      <div class="top-back" @click="goBack"></div>
    </div>
    <div class="main betweenbox">
      <div class="main-center centermap">
        <!-- 照明控制svg -->
        <iframe
          class="svg"
          frameborder="0"
          border="none"
          :src="svgUrl"
          style="width:100%;height:100%"
        />
      </div>
      <div class="main-right borderStyle colbetweenbox">
        <!-- 1.顶部一行的菜单 -->
        <div class="main-right-menu startbox">
          <div
            class="item centerbox"
            v-for="(item,index) in menuList"
            :key="index"
            @click="changeMenu(item)"
            :class="{active:activeMenu===item.SBID}"
            :title="item.name"
          >{{item.name}}</div>
        </div>
        <!-- 2.设备轮播 -->
        <!-- 2.区域图片 -->
        <div class="main-right-collapse">
          <div ref="scroll" class="right-top-rotation">
            <Nodata v-if="nodata" />
            <div class="tans" v-if="!nodata" :style="{ left: lefts + '%' }">
              <div
                class="rotation-img"
                v-for="(item, index) in equipInfo"
                :key="index"
                @click="changeArea(item)"
                :class="visi === item.area ? 'visited' : ''"
              >
                <div class="bg-out centerbox">
                  <img class="bg-in" :src="item.src" alt srcset />
                </div>

                <div class="rotation-text">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div :class="colorLeft === 0 ? 'icons' : ''" class="icon icon-left">
            <span @click="left" class="iconfont iconxiayibu-copy"></span>
          </div>
          <div :class="colorRight === 0 ? 'icons' : ''" class="icon icon-right">
            <span @click="right" class="iconfont iconxiayibu-copy"></span>
          </div>
        </div>
        <!-- 3.圆柱 -->
        <div class="main-right-cylinder betweenbox">
          <div>
            <img src="../../../../assets/img/AuxiliaryMonitor/c_blue.png" alt="设备数" />
            <div class="number blue">{{cylinderData.numberDevices}}</div>
            <div class="text">设备数</div>
          </div>
          <div>
            <img src="../../../../assets/img/AuxiliaryMonitor/c_green.png" alt="在线数" />
            <div class="number green">{{cylinderData.onlineNumber}}</div>
            <div class="text">在线数</div>
          </div>
          <div>
            <img src="../../../../assets/img/AuxiliaryMonitor/c_green.png" alt="在线率" />
            <div class="number green">{{cylinderData.onlineRate}}</div>
            <div class="text">在线率</div>
          </div>
          <div>
            <img src="../../../../assets/img/AuxiliaryMonitor/c_yellow.png" alt="告警数" />
            <div class="number yellow">{{cylinderData.alarmNumber}}</div>
            <div class="text">告警数</div>
          </div>
        </div>
        <!-- 4.表格 -->
        <div class="main-right-table">
          <el-table
            :data="tableData2"
            style="width: 100%"
            height="100%"
            @selection-change="handleSelectionChange"
            :row-class-name="tableRowClassName"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column
              prop="deviceName"
              sortable
              :sort-method="sortMethod"
              label="设备名称"
              :show-overflow-tooltip="true"
              width="110"
            ></el-table-column>
            <el-table-column prop="name" label="采集名称" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="采集值" width="80" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <!-- 1 遥测 数值  -->
                <div v-if="scope.row.remoteType=='1'">
                  <span>{{scope.row.value?scope.row.value:'--'}}</span>
                  <span>{{scope.row.unit?scope.row.unit:'' }}</span>
                </div>
                <!-- 2-遥信-状态 3-遥控-开关变位 4-遥调-暂无-->
                <div v-else>
                  <span
                    :class="{abnormal:scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name.indexOf('警')>-1?true:false:false}"
                  >{{scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name:'未知'}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="采集时间" width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.time"
                >{{scope.row.time.substring(0,10)}} {{scope.row.time.substring(11,19)}}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="历史" width="70" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span class="iconClick" @click="iconClick(scope.row)"></span>
              </template>
            </el-table-column>-->
            <el-table-column label="遥控" width="80" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div class="aroundbox">
                  <div class="colbetweenbox">
                    <div>
                      <el-button type="text" @click="handleBtn('开',scope.row)">开</el-button>
                    </div>
                    <div>
                      <el-button type="text" @click="handleBtn('关',scope.row)">关</el-button>
                    </div>
                  </div>
                  <div>
                    <el-button
                      type="text"
                      :disabled="!scope.row.videoCode"
                      :class="{disabled:!scope.row.videoCode}"
                      icon="el-icon-video-camera-solid el-btn-icon"
                      @click="handleBtn2(scope.row)"
                    ></el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 视频弹窗 -->
    <el-dialog
      title="实时视频"
      :visible.sync="videoStatus"
      width="50%"
      :before-close="handleClose"
      :modal="false"
    >
      <videoPopUp v-if="videoStatus" :datas="list" />
      <!-- <iframe class="iframe" frameborder="0"></iframe> -->
    </el-dialog>
    <!-- 历史弹窗 -->
    <el-dialog
      title="历史"
      :visible.sync="historyPopupStatus"
      width="60%"
      :before-close="handleClose"
    >
      <histroyPopUp v-if="historyPopupStatus" :datas="popupData" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { menuListType, tableDataList, objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { log } from "three";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import _ from "lodash";
import Nodata from "@/components/Nodata/index.vue";
import videoPopUp from "../../components/popup/videoPopUp.vue";
import histroyPopUp from "../../components/popup/historyPopUp.vue";
interface SpanMethodType {
  row: object;
  column: object;
  rowIndex: number;
  columnIndex: number;
}
@Component({
  components: { Nodata, videoPopUp, histroyPopUp },
})
export default class extends Vue {
  //数据状态
  nodata = false;
  // 顶部菜单
  public menuList: any = [
    {
      name: "普通照明灯具",
      SBID: "0501",
      active: true,
    },
  ];

  public activeMenu: string = "0501";

  public equipOBJ = {
    保护室: require("../../../../assets/img/area/保护室.png"),
    地下电缆层: require("../../../../assets/img/area/地下电缆层.png"),
    电抗器室: require("../../../../assets/img/area/电抗器室.png"),
    电容器室: require("../../../../assets/img/area/电容器室.png"),
    工器具室: require("../../../../assets/img/area/工器具室.png"),
    接地变室: require("../../../../assets/img/area/接地变室.png"),
    开关柜测温: require("../../../../assets/img/area/开关柜测温.png"),
    开关室: require("../../../../assets/img/area/开关室.png"),
    其他: require("../../../../assets/img/area/其他.png"),
    室外: require("../../../../assets/img/area/室外.png"),
    蓄电池室: require("../../../../assets/img/area/蓄电池室.png"),
    站用变室: require("../../../../assets/img/area/站用变室.png"),
    主变室: require("../../../../assets/img/area/主变室.png"),
    主控室: require("../../../../assets/img/area/主控室.png"),
  };

  tableSelect: Array<object> = [];
  videoStatus: boolean = false;
  historyPopupStatus: boolean = false; //历史弹窗
  get changeStationName() {
    return AuxiliaryMonitorModule.stationName;
  }

  // 灯光控制器
  get getDeviceInfo() {
    var xtInfo = AuxiliaryMonitorModule.getxtInfo || {};
    xtInfo=_.cloneDeep(xtInfo)
    var firefightInfo = xtInfo["05"] || [];
    var firefightDeviceobj = {
      "0501": [],
    };
    firefightInfo.map((k, j) => {
      firefightDeviceobj[k.sbValue] = firefightDeviceobj[k.sbValue] || [];
      firefightDeviceobj[k.sbValue].push(k);
    });
    // console.log("firefightDeviceobj:", firefightDeviceobj);

    // 区域房间图片处理
    var areaInfo = firefightDeviceobj[this.activeMenu] || [];
    const res = new Map();
    areaInfo = areaInfo.filter((a) => !res.has(a.area) && res.set(a.area, 1));
    var equip = [];
    areaInfo.map((k, j) => {
      if (!k.areaName) {
        equip[j] = {
          name: "未知",
          area: "",
          src: this.equipOBJ["其他"],
        };
        return;
      }
      var onoff = true;
      for (let key in this.equipOBJ) {
        if (onoff) {
          if (k.areaName.indexOf(key) >= 0) {
            equip[j] = {
              name: k.areaName,
              area: k.area,
              src: this.equipOBJ[key],
            };
            onoff = false;
          } else {
            equip[j] = {
              name: k.areaName,
              area: k.area,
              src: this.equipOBJ["其他"],
            };
          }
        }
      }
    });
    // console.log("equip:", equip);
    if (equip.length < 1) {
      this.nodata = true;
    } else {
      this.nodata = false;
    }
    if (equip.length <= 3) {
      this.colorLeft = 0;
      this.colorRight = 0;
    } else {
      this.colorLeft = 0;
      this.colorRight = 1;
    }
    this.equipInfo = equip;
    return firefightDeviceobj;
  }

  // 2.2点击区域图片 切换数据
  activeAreaId = "";
  changeArea(item) {
    // console.log("item:", item);
    this.activeAreaId = item.area;
    this.visi = item.area;
  }

  // 2.3 区域图片左右按钮切换
  public visi: any = "";
  public colorLeft: number = 0;
  public colorRight: number = 0;
  public lefts: any = 0;
  //向左
  left() {
    if (this.lefts == 0) {
      return;
    } else {
      this.colorRight = 1;
      this.lefts = this.lefts + 33.3;
      if (this.lefts == 0) {
        this.colorLeft = 0;
      }
    }
  }
  //向右
  right() {
    // console.log(this.equipInfo);

    if (this.lefts <= -(this.equipInfo.length - 3) * 33.3) {
      return;
    } else {
      this.colorLeft = 1;
      this.lefts = this.lefts - 33.3;
      if (this.lefts == -(this.equipInfo.length - 3) * 33.3) {
        this.colorRight = 0;
      }
    }
  }

  // 区域房间图片处理
  equipInfo: any = [];

  // 3.圆柱数据
  get cylinderData() {
    var xtInfo = AuxiliaryMonitorModule.getxtInfo || {};
    xtInfo=_.cloneDeep(xtInfo)
    var firefightInfo = xtInfo["05"] || []; //消防
    var getterZxdw = GetSocketModule.zxdw; // 通讯状态的点位小数组
    var arrOffline = []; //离线点位小数组
    var arrgj = []; //告警点位小数组

    firefightInfo.map((k) => {
      getterZxdw.forEach((m, n) => {
        if (m === k.dwValue && k.value && k.value === 1) {
          arrOffline.push(k);
        }
      });
      if (k.isGj === "gj") {
        arrgj.push(k);
      }
    });
    // 每个小数组长度是设备离线数-一个设备对应一个通讯状态点位
    var firefightOfflineobj = {
      "0501": [],
    };
    arrOffline.forEach((item) => {
      firefightOfflineobj[item.sbValue] =
        firefightOfflineobj[item.sbValue] || [];
      firefightOfflineobj[item.sbValue].push(item);
    });

    // 每个小数组长度是设备告警数
    var firefightgjobj = {
      "0501": [],
    };
    var arrgjdwValue = _.uniqBy(arrgj, "deviceId");
    arrgjdwValue.forEach((item) => {
      firefightgjobj[item.sbValue] = firefightgjobj[item.sbValue] || [];
      firefightgjobj[item.sbValue].push(item);
    });

    var SBID = this.activeMenu;
    let hzbjzjold = this.getDeviceInfo[SBID] || [];
    let firefightOfflinelistold = firefightOfflineobj[SBID] || [];
    let firefightgjlistold = firefightgjobj[SBID] || [];

    let hzbjzj = [];
    let firefightOfflinelist = [];
    let firefightgjlist = [];
    if (this.activeAreaId) {
      hzbjzjold.map((k) => {
        if (k.area == this.activeAreaId) {
          hzbjzj.push(k);
        }
      });
      firefightOfflinelistold.map((m) => {
        if (m.area == this.activeAreaId) {
          firefightOfflinelist.push(m);
        }
      });
      firefightgjlistold.map((a) => {
        if (a.area == this.activeAreaId) {
          firefightgjlist.push(a);
        }
      });
    } else {
      hzbjzj = hzbjzjold;
      firefightOfflinelist = firefightOfflinelistold;
      firefightgjlist = firefightgjlistold;
    }

    var numberDevices = _.uniqBy(hzbjzj, "deviceId").length || 0;
    var offlineNumber = firefightOfflinelist.length;
    var alarmNumber = firefightgjlist.length;
    var onlineRate = "";

    var onlineNumber = Number(numberDevices) - Number(offlineNumber);
    if (numberDevices > 0) {
      onlineRate = (Number(onlineNumber) / Number(numberDevices)) * 100 + "%";
    } else {
      onlineRate = "0";
    }

    var cylinder = {
      numberDevices: numberDevices, //设备总数
      onlineNumber: onlineNumber, //在线数
      onlineRate: onlineRate, //在线率
      alarmNumber: alarmNumber, //告警数
    };
    // console.log("cylinder:", cylinder);

    return cylinder;
  }
  // 表格数据
  get tableData2() {
    var data = this.getDeviceInfo[this.activeMenu] || [];
    let res = new Map();
    data = data.filter((data) => !res.has(data.id) && res.set(data.id, 1));
    let newdata = [];
    if (this.activeAreaId) {
      data.map((k) => {
        if (k.area == this.activeAreaId) {
          newdata.push(k);
        }
      });
    } else {
      newdata = data;
    }
     newdata = newdata.sort((a, b) => a.orderNum - b.orderNum);
    newdata = this.pingbiFun(newdata);
    newdata = this.getSpanArr(newdata);
    // newdata = newdata.sort((a, b) => a.status - b.status);
    console.log(21,newdata)
    return newdata;
  }
  sortMethod(a, b) {
     return b.status - a.status;
  }
  // 控制id、给状态数据上去
  controltostate(data) {
    var selected = [];
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data.length; j++) {
        if (data[i].remoteType == 3) {
          if (data[i].deviceId == data[j].deviceId) {
            if (data[j].remoteType == 2) {
              data[j].kzid = data[i].id; // 控制id 给到状态数据上面去
              selected.push(data[j]);
            }
          }
        } else if (data[i].remoteType == 1) {
          if (data[i].deviceId == data[j].deviceId) {
            if (data[j].remoteType == 1) {
              selected.push(data[j]);
            }
          }
        }
      }
    }
    // console.log('selected:',selected);
    return selected;
  }
  // 屏蔽方法
  pingbiFun(data) {
    let newdata = [];
    let pingbiPointdata = [
      "010503", // "火灾探测器屏蔽",
      "010903", // "烟感屏蔽",
      "020206", // "电子围栏屏蔽",
      "020207", // "电子围栏屏蔽状态",
      "020305", // "红外对射屏蔽",
      "020306", // "红外对射屏蔽状态",
      "020405", // "双鉴屏蔽",
      "020406", // "双鉴屏蔽状态",
      "040816", // "水浸探测器屏蔽",
      "040817", // "水浸探测器屏蔽状态",
      "040902", // "SF6主机屏蔽",
      "040903", // "SF6主机屏蔽状态",
      "010108", // "站端消防控制器屏蔽总",
    ];
    let remote2 = 0;
    let remote3 = 0;
    data.map((k, j) => {
      if (k.remoteType == "2") {
        if (pingbiPointdata.indexOf(k.dwValue) > -1) {
          //  第二种
          return;
        } else {
          //  第一种
          newdata.push(k);
          remote2++;
        }
      } else if (k.remoteType == "3") {
        //  第三种
        newdata.push(k);
        remote3++;
      }
    });
    if (remote3 > 0) {
      newdata = this.controltostate(newdata);
    }
    return newdata;
  }

  // 返回辅助监控首页
  goBack() {
    this.$router.push("overview");
  }
  // 显示的菜单切换
  changeMenu(item) {
    this.activeAreaId = "";
    this.lefts = 0;
    this.activeMenu = item.SBID;
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  colspan: any = {};
  rowspan: any = {
    num: 0,
    rowIndex: 0,
    columnIndex: [],
  };
  // 合并行数
  getSpanArr(data) {
    let obj = {};
    let deviceId;
    data.map((k, i) => {
      deviceId = k.deviceId;
      if (!obj[deviceId]) obj[deviceId] = [];
      obj[deviceId].push(k);
    });

    let num = {};
    let arr = [];
    let rowIndex = [];
    for (let key in obj) {
      num[key] = obj[key].length;
      rowIndex.push(arr.length);
      arr = [...arr, ...obj[key]];
    }

    this.colspan = {};
    this.rowspan = {
      num: num,
      rowIndex: rowIndex,
      columnIndex: [0],
    };
    // console.log(22222222222, this.rowspan);
    return arr;
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // console.log(
    //   33333333333,
    //   row,
    //   column,
    //   rowIndex,
    //   columnIndex,
    //   this.rowspan.num[row.deviceId]
    // );
    if (this.rowspan) {
      if (
        this.rowspan.columnIndex &&
        this.rowspan.columnIndex.length > 0 &&
        this.rowspan.columnIndex.indexOf(columnIndex) > -1
      ) {
        if (this.rowspan.rowIndex.indexOf(rowIndex) > -1) {
          // console.log(3);
          return {
            colspan: 1,
            rowspan: this.rowspan.num[row.deviceId]
              ? this.rowspan.num[row.deviceId]
              : 1,
          };
        } else {
          // console.log(4);
          return {
            colspan: 0,
            rowspan: 0,
          };
        }
      }
    }
  }
  addInframe() {
    // let el-picker-panel el-date-picker el-popper
    window.setTimeout(() => {
      let pickerArr = document.querySelectorAll(".el-message-box__wrapper");
      pickerArr.forEach((item) => {
        let width = item.clientWidth;
        let height = item.clientHeight;
        let iframe: any = item.querySelector("iframe");
        if (!iframe) {
          iframe = document.createElement("iframe");
          item.appendChild(iframe);
        }
        iframe.style.border = "none";
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
        iframe.style.position = "absolute";
        iframe.style.top = "0px";
        iframe.style.left = "0px";
        iframe.style.zIndex = 1;
        iframe.style.zIndex = 1;
        iframe.style.pointerEvents = "none";
      });
    }, 100);
  }
  // 确认弹窗 开关
  handleBtn(item: string, row): void {
    this.addInframe();
    this.$confirm("是否" + item, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        var params = {
          command: item === "开" ? "1" : "0",
          pointerId: row.kzid,
        };
        (this as any).$services
          .sendPointerCommand({
            data: params,
            method: "post",
            postparams: true,
          })
          .then((res: any) => {
            // console.log(res.data);
            if (res.data) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
            if (item === "开") {
              row.value = "1";
            } else {
              row.value = "0";
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  list = {};
  // 视频
  handleBtn2(row: any): void {
    this.list = row;
    this.videoStatus = true;
  }
  handleClose() {
    this.videoStatus = false;
    this.historyPopupStatus = false;
  }

  popupData = {};
  //表格-历史弹窗
  iconClick(value: Object) {
    this.popupData = value;
    this.historyPopupStatus = true;
  }

  private svgUrl = "";
  mounted() {
    // let ocx = this.init();
    // ocx.setWindowsLayout(1);
    // ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    // ocx.setCallBack();
    // console.log("this.$route.query:", this.$route.query);
  }
  @Watch("$route", { immediate: true })
  changeEvent() {
    this.setSvg();
  }
  setSvg() {
    if (this.$route.query.code) {
      let stationId = this.$route.query.code;
      let type = "照明控制";
      let form = {
        stationId: stationId,
        menuName: type,
      };
      (this as any).$services
        .queryDwUrl({ data: form, method: "get" })
        .then((result: any) => {
          // console.log("获取绘图图片地址:", result);
          let data = result.data;
          this.svgUrl = data;
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.light {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-name {
      width: 10rem;
      font-size: 0.2rem;
      font-weight: 400;
      color: rgba(118, 238, 250, 1);
    }
    &-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    &-center {
      width: 10rem;
      height: 100%;
      margin: 0 0.2rem;
      padding: 0.2rem;
    }
    &-right {
      width: 5.24rem;
      height: 100%;
      &-menu {
        width: 100%;
        height: 0.32rem;
        position: relative;
        .item {
          width: 25%;
          height: 0.32rem;
          font-size: 0.2rem;
          border: 1px solid #05b4ff;
          background-color: transparent;
          cursor: pointer;
        }
        .item:hover {
          background-color: #234d74;
        }
        .active {
          border: 1px solid rgba(22, 100, 201, 1);
          background: linear-gradient(
            180deg,
            rgba(6, 86, 238, 1) 0%,
            rgba(6, 88, 241, 1) 34%,
            rgba(3, 44, 121, 1) 100%
          );
        }
        .option {
          position: absolute;
          right: 0;
          top: 0.32rem;
          width: 25%;
          .item {
            width: 100%;
            height: 0.32rem;
            font-size: 0.2rem;
            border: 1px solid #05b4ff;
            background-color: transparent;
            cursor: pointer;
          }
          .item:hover {
            background-color: #234d74;
          }
        }
      }
      &-collapse {
        width: 100%;
        height: 2rem;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .icon {
          position: absolute;
          top: 50%;
          z-index: 98;
          color: #36b0eb;
          padding: 0.1rem;
          font-size: 0.2rem;
          cursor: pointer;
        }
        .icon-left {
          left: 2%;
          transform: rotate(180deg);
        }
        .icon-right {
          right: 2%;
        }
        .icons {
          color: #ccc;
        }
        .icons2 {
          color: #ccc;
        }
        .tans {
          position: absolute;
          width: 100%;
          height: 100%;
          transition: all 0.6s;
          top: 0;
        }
        .right-top-rotation {
          height: 100%;
          width: calc(100% - 0.8rem);
          margin: 0 0.4rem;
          overflow: hidden;
          position: relative;
          white-space: nowrap;
          .rotation-img {
            height: 100%;
            width: 33.3%;
            display: inline-block;
            position: relative;
            cursor: pointer;
            vertical-align: middle;
            .bg-out {
              // width: 1.86rem;
              height: 1.88rem;
              background: url("../../../../assets/img/AuxiliaryMonitor/txzt-x.png")
                no-repeat center center;
            }
            .rotation-text {
              position: absolute;
              width: 100%;
              left: 50%;
              top: 85%;
              transform: translateX(-50%);
              cursor: pointer;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.14rem;
            }
          }
          .rotation-img:hover {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.16rem;
            }
          }
          .visited {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.18rem;
              color: #1ab2ff;
            }
          }
        }
      }
      &-cylinder {
        width: 100%;
        height: 1.5rem;
        margin: 0.1rem auto;
        padding: 0 0.1rem;
        box-sizing: border-box;
        > div {
          width: 1.2rem;
          height: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .number {
            position: absolute;
            top: 0.2rem;
            left: 0;
            width: 100%;
            font-family: "numfont";
            font-size: 0.24rem;
            text-align: center;
          }
          .blue {
            color: rgba(3, 189, 254, 1);
          }
          .green {
            color: rgba(14, 252, 158, 1);
          }
          .yellow {
            color: rgba(254, 159, 55, 1);
          }
          .text {
            width: 100%;
            text-align: center;
          }
        }
      }
      &-table {
        width: 100%;
        height: calc(100% - 4.13rem);
        margin: 0.1rem auto;
        box-sizing: border-box;
        .iconClick {
          display: inline-block;
          width: 0.42rem;
          height: 0.2rem;
          background: url(../../../../assets/img/OnlineMonitor/cli_qx.png)
            no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
        .iconClick:hover {
          background: url(../../../../assets/img/OnlineMonitor/nor_qx.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .right {
    width: 100%;
    height: 5rem;
    background: #124d9c;
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
.light {
  .el-dialog__wrapper {
    pointer-events: none;
    > div {
      pointer-events: auto;
    }
  }
  .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    background-color: transparent;
  }
  .el-icon-arrow-left:before {
    content: url("../../../../assets/img/AuxiliaryMonitor/icon/icon_left.png");
  }
  .el-icon-arrow-right:before {
    content: url("../../../../assets/img/AuxiliaryMonitor/icon/icon_right.png");
  }
  .el-button--text .el-btn-icon {
    font-size: 0.22rem;
  }
  .main-right-table .el-button--text.is-disabled {
    color: #ccc;
    border-color: transparent;
  }
  .el-table .cell .abnormal {
    color: rgba(246, 91, 55, 1);
  }
}
</style>